<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import { debounce } from '@/utils'

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '400px'
      },
      yAxisName: {
        type: String,
        default: '元'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      },
      selectedData:{
        type: Object,
        default: ()=>{}
      },
      showLegend: {
        type: Boolean,
        default: true
      },
      legendData:{
        type: Array,
        default: ()=>[]        
      },
      prevSevenDate:{
        type: Array,
        default: ()=>[]        
      },
    },
    data() {
      return {
        chart: null,
        sidebarElm: null,
        seriesData: null,
        series: [{
          itemStyle: {
              normal: {
                color: '#5e9bdf',
                lineStyle: {
                  color: '#5e9bdf',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            animationDuration: 1000,
          },
          {
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#fdc927',
                lineStyle: {
                  color: '#fdc927',
                  width: 2
                },
              }
            },
            animationDuration: 1000,
          },
          {
          itemStyle: {
              normal: {
                color: '#970222',
                lineStyle: {
                  color: '#970222',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            animationDuration: 1000,
          },
          {
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#ff4b4b',
                lineStyle: {
                  color: '#ff4b4b',
                  width: 2
                },
              }
            },
            animationDuration: 1000,
          },
        ],
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val,this.showLegend,this.legendData)
        }
      },
      selectedData: {
        deep: true,
        handler(val) {
          this.setOptions(this.chartData,this.showLegend,this.legendData,val)
        }
      },
    },
    mounted() {
      this.seriesData=this.series.slice(0,this.legendData.length)
      this.initChart()
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }

      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }

      this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

      this.chart.dispose()
      this.chart = null
    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(dataset,showLegend,legendData={},selectedData={} ) {
        this.chart.setOption({
          xAxis: {
            type: 'category',
            name:"时间"
            
            },
          grid: {
            left: 20,
            right: 50,
            bottom: 20,
            top: 35,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: (params)=> {
              let res='<div class=tooltipStyle><div class=list><div class=listTitle>'+params[0].name+'</div>';
               for(let p of params){
                if(p.seriesName!="近七日对比"){
                  res+='<div class=item><div class=itemCircle style="background:'+p.color+'"></div><div>'+p.seriesName+'：'+params[0].value[p.seriesName]+'</div></div>'
                }
              }
              res+='</div>';
               for(let p of params){
                if(p.seriesName=="近七日对比"){
                  res+='<hr/><div class=list><div class=listTitle>'+this.prevSevenDate[params[0].dataIndex]+'</div><div class=item><div class=itemCircle style="background:'+p.color+'"></div><div>近七日对比：'+params[0].value["近七日对比"]+'</div></div></div>'
                }
              }
              res+='</div>';
              return res;
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            },
            name:this.yAxisName
          },
          //图例配置项
          legend: {
            show:showLegend,
            right:"10%",
            data: legendData,
            selected:selectedData
          },
          //数据配置项
          dataset:dataset,
          // dataset:{
          //   dimensions: ['product', '考核值', '实际完成值', "差值",'近七日对比'],
          //   source:[
          //     {"product":"2019-06-08","考核值":"500","实际完成值":'4500',"差值":'500',"近七日对比":'200'},
          //     {"product":"2019-06-09","考核值":"500","实际完成值":'2200',"差值":'60',"近七日对比":'15'},
          //     {"product":"2019-06-10","考核值":"500","实际完成值":'1000',"差值":'48',"近七日对比":'48'},
          //     {"product":"2019-06-11","考核值":"1900","实际完成值":'1200',"差值":'56',"近七日对比":'200'},
          //     {"product":"2019-06-12","考核值":"30","实际完成值":'600',"差值":'400',"近七日对比":'56'},
          //     {"product":"2019-06-13","考核值":"10","实际完成值":'500',"差值":'300',"近七日对比":'63'},
          //     {"product":"2019-06-14","考核值":"2600","实际完成值":'4000',"差值":'500',"近七日对比":'89'}
          //   ]
          // },
          series: this.seriesData
        })
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData,this.showLegend,this.legendData,this.selectedData)
      }
    }
  }
</script>


